<template>
	<view class="container">
	  <!-- 用户信息区域 -->
	  <view class="user-header">
		<view class="user-info">
		  <image class="avatar" src="/static/logo.png" mode="aspectFill" />
		  <view class="info-content">
			<text class="username">用户中心</text>
			<text class="user-desc">欢迎使用CMS小程序</text>
		  </view>
		</view>
	  </view>
	  
	  <!-- 功能菜单 -->
	  <view class="menu-section">
		<view class="menu-group">
		  <view class="menu-item" @tap="goToCategory">
			<view class="menu-icon">
			  <text class="icon-text">📋</text>
			</view>
			<view class="menu-content">
			  <text class="menu-title">栏目管理</text>
			  <text class="menu-desc">查看所有栏目</text>
			</view>
			<text class="arrow">></text>
		  </view>
		  
		  <view class="menu-item" @tap="goToArticles">
			<view class="menu-icon">
			  <text class="icon-text">📄</text>
			</view>
			<view class="menu-content">
			  <text class="menu-title">文章管理</text>
			  <text class="menu-desc">查看所有文章</text>
			</view>
			<text class="arrow">></text>
		  </view>
		  
		  <view class="menu-item" @tap="goToTemplates">
			<view class="menu-icon">
			  <text class="icon-text">⚙️</text>
			</view>
			<view class="menu-content">
			  <text class="menu-title">模板管理</text>
			  <text class="menu-desc">查看页面模板</text>
			</view>
			<text class="arrow">></text>
		  </view>
		</view>
		
		<view class="menu-group">
		  <view class="menu-item" @tap="refreshData">
			<view class="menu-icon">
			  <text class="icon-text">🔄</text>
			</view>
			<view class="menu-content">
			  <text class="menu-title">刷新数据</text>
			  <text class="menu-desc">重新获取最新内容</text>
			</view>
			<text class="arrow">></text>
		  </view>
		  
		  <view class="menu-item" @tap="clearCache">
			<view class="menu-icon">
			  <text class="icon-text">🗑️</text>
			</view>
			<view class="menu-content">
			  <text class="menu-title">清除缓存</text>
			  <text class="menu-desc">清理本地缓存数据</text>
			</view>
			<text class="arrow">></text>
		  </view>
		</view>
		
		<view class="menu-group">
		  <view class="menu-item" @tap="showAbout">
			<view class="menu-icon">
			  <text class="icon-text">ℹ️</text>
			</view>
			<view class="menu-content">
			  <text class="menu-title">关于我们</text>
			  <text class="menu-desc">了解更多信息</text>
			</view>
			<text class="arrow">></text>
		  </view>
		</view>
	  </view>
	  
	  <!-- 数据统计 -->
	  <view class="stats-section">
		<view class="stats-title">
		  <text class="title-text">数据统计</text>
		</view>
		<view class="stats-grid">
		  <view class="stats-item">
			<text class="stats-number">{{stats.categoryCount || 0}}</text>
			<text class="stats-label">栏目数量</text>
		  </view>
		  <view class="stats-item">
			<text class="stats-number">{{stats.articleCount || 0}}</text>
			<text class="stats-label">文章数量</text>
		  </view>
		  <view class="stats-item">
			<text class="stats-number">{{stats.templateCount || 0}}</text>
			<text class="stats-label">模板数量</text>
		  </view>
		</view>
	  </view>
	  
	  <!-- 加载状态 -->
	  <view v-if="loading" class="loading">
		<text class="loading-text">加载中...</text>
	  </view>
	  
	  <!-- 错误状态 -->
	  <view v-if="error" class="error-container">
		<text class="error-text">{{error}}</text>
		<button @tap="retry" class="retry-btn">重试</button>
	  </view>
	</view>
</template>

<script>
import { categoryApi, articleApi, templateApi } from '@/api/config';

export default {
	data() {
	  return {
		loading: false,
		error: '',
		stats: {
		  categoryCount: 0,
		  articleCount: 0,
		  templateCount: 0
		}
	  }
	},
	onLoad() {
	  console.log('[用户页] 页面加载');
	  this.loadStats();
	},
	onShow() {
	  // 页面显示时刷新统计数据
	  this.refreshStats();
	},
	methods: {
	  async loadStats() {
		try {
		  this.loading = true;
		  this.error = '';
		  
		  console.log('[用户页] 开始加载统计数据');
		  
		  // 并行获取各类数据统计
		  const [categoryRes, articleRes, templateRes] = await Promise.all([
			categoryApi.getList(),
			articleApi.getList({ pageNo: 1, size: 1 }),
			templateApi.getList()
		  ]);
		  
		  // 统计分类数量
		  if (categoryRes.code === 200) {
			this.stats.categoryCount = categoryRes.data.total || 0;
		  }
		  
		  // 统计文章数量
		  if (articleRes.code === 200) {
			this.stats.articleCount = articleRes.data.total || 0;
		  }
		  
		  // 统计模板数量
		  if (templateRes.code === 200) {
			this.stats.templateCount = templateRes.data.length || 0;
		  }
		  
		  console.log('[用户页] 统计数据加载成功:', this.stats);
		  
		} catch (error) {
		  console.error('[用户页] 统计数据加载失败:', error);
		  this.error = error.message || '统计数据加载失败';
		} finally {
		  this.loading = false;
		}
	  },
	  
	  async refreshStats() {
		// 静默刷新统计数据
		try {
		  const [categoryRes, articleRes, templateRes] = await Promise.all([
			categoryApi.getList(),
			articleApi.getList({ pageNo: 1, size: 1 }),
			templateApi.getList()
		  ]);
		  
		  if (categoryRes.code === 200) {
			this.stats.categoryCount = categoryRes.data.total || 0;
		  }
		  if (articleRes.code === 200) {
			this.stats.articleCount = articleRes.data.total || 0;
		  }
		  if (templateRes.code === 200) {
			this.stats.templateCount = templateRes.data.length || 0;
		  }
		} catch (error) {
		  console.error('[用户页] 静默刷新失败:', error);
		}
	  },
	  
	  retry() {
		this.error = '';
		this.loadStats();
	  },
	  
	  goToCategory() {
		console.log('[用户页] 跳转栏目管理');
		uni.showToast({
		  title: '栏目管理功能开发中',
		  icon: 'none'
		});
	  },
	  
	  goToArticles() {
		console.log('[用户页] 跳转文章管理');
		uni.showToast({
		  title: '文章管理功能开发中',
		  icon: 'none'
		});
	  },
	  
	  goToTemplates() {
		console.log('[用户页] 跳转模板管理');
		uni.showToast({
		  title: '模板管理功能开发中',
		  icon: 'none'
		});
	  },
	  
	  async refreshData() {
		try {
		  console.log('[用户页] 刷新数据');
		  uni.showLoading({ title: '刷新中...' });
		  
		  await this.loadStats();
		  
		  uni.hideLoading();
		  uni.showToast({
			title: '数据刷新成功',
			icon: 'success'
		  });
		} catch (error) {
		  uni.hideLoading();
		  uni.showToast({
			title: '刷新失败',
			icon: 'none'
		  });
		}
	  },
	  
	  clearCache() {
		console.log('[用户页] 清除缓存');
		uni.showModal({
		  title: '确认清除',
		  content: '确定要清除本地缓存数据吗？',
		  success: (res) => {
			if (res.confirm) {
			  // 清除本地存储
			  uni.clearStorageSync();
			  uni.showToast({
				title: '缓存清除成功',
				icon: 'success'
			  });
			}
		  }
		});
	  },
	  
	  showAbout() {
		console.log('[用户页] 显示关于信息');
		uni.showModal({
		  title: '关于我们',
		  content: 'CMS小程序 v1.0.0\n基于uni-app开发\n支持实时内容更新',
		  showCancel: false
		});
	  }
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 20px;
}

.user-header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 40px 20px 30px;
	
	.user-info {
		display: flex;
		align-items: center;
		
		.avatar {
			width: 60px;
			height: 60px;
			border-radius: 30px;
			margin-right: 15px;
			border: 2px solid rgba(255,255,255,0.3);
		}
		
		.info-content {
			flex: 1;
			
			.username {
				display: block;
				font-size: 18px;
				color: #fff;
				font-weight: 500;
				margin-bottom: 4px;
			}
			
			.user-desc {
				font-size: 14px;
				color: rgba(255,255,255,0.8);
			}
		}
	}
}

.menu-section {
	margin-top: -20px;
	padding: 0 15px;
	
	.menu-group {
		background: #fff;
		border-radius: 8px;
		margin-bottom: 15px;
		overflow: hidden;
		
		.menu-item {
			display: flex;
			align-items: center;
			padding: 16px;
			border-bottom: 1px solid #f5f5f5;
			
			&:last-child {
				border-bottom: none;
			}
			
			.menu-icon {
				width: 40px;
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				background: rgba(0,122,255,0.1);
				border-radius: 8px;
				margin-right: 12px;
				
				.icon-text {
					font-size: 20px;
				}
			}
			
			.menu-content {
				flex: 1;
				
				.menu-title {
					display: block;
					font-size: 16px;
					color: #333;
					margin-bottom: 2px;
				}
				
				.menu-desc {
					font-size: 12px;
					color: #999;
				}
			}
			
			.arrow {
				font-size: 16px;
				color: #ccc;
			}
		}
	}
}

.stats-section {
	margin: 0 15px;
	background: #fff;
	border-radius: 8px;
	padding: 16px;
	
	.stats-title {
		margin-bottom: 16px;
		
		.title-text {
			font-size: 16px;
			color: #333;
			font-weight: 500;
		}
	}
	
	.stats-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
		
		.stats-item {
			text-align: center;
			padding: 12px;
			background: #f8f9fa;
			border-radius: 6px;
			
			.stats-number {
				display: block;
				font-size: 24px;
				color: #007aff;
				font-weight: 600;
				margin-bottom: 4px;
			}
			
			.stats-label {
				font-size: 12px;
				color: #666;
			}
		}
	}
}

.loading {
	padding: 16px 0;
	text-align: center;
}

.loading-text {
	font-size: 14px;
	color: #999;
}

.error-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
}

.error-text {
	font-size: 16px;
	color: #666;
	margin-bottom: 20px;
	text-align: center;
}

.retry-btn {
	padding: 12px 24px;
	background-color: #007aff;
	color: #fff;
	border-radius: 6px;
	font-size: 16px;
}
</style> 